﻿<Page x:Class="ComicReader.Views.ReaderPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Helpers="clr-namespace:ComicReader.Helpers"
    xmlns:Controls="clr-namespace:ComicReader.Controls"
    MinHeight="300" 
    MinWidth="300" 
    Height="Auto" Width="Auto"
    Background="{DynamicResource MainBackgroundBrush}"      
    Title="Reader Page">



    <Page.Resources>
        <Helpers:PageDataToImageSourceConverter x:Key="PageDataToImageSourceConverter" />

        <Style TargetType="{x:Type ListBox}">
            <Setter Property="ScrollViewer.HorizontalScrollBarVisibility"
                    Value="Disabled" />
            <Setter Property="Background" Value="{DynamicResource MainBackgroundBrush}" />
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <WrapPanel />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>

            <!-- Set the ItemTemplate of the ListBox to a DataTemplate which
           explains how to display an object of type BitmapImage. -->
            <Setter Property="ItemTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <DataTemplate.Resources>

                            <!-- border -->
                            <Style x:Key="WidgetBorderStyle" TargetType="Border">
                                <Setter Property="BorderThickness" Value="0" />
                                <Setter Property="CornerRadius" Value="10" />
                                <Setter Property="Background" Value="#20000000" />
                                <Setter Property="BorderBrush" Value="#80ffffff" />
                                <Setter Property="Padding" Value="7"/>
                                <Setter Property="Margin" Value="5"/>
                            </Style>

                            <!-- area -->
                            <Style x:Key="NumberAreaStyle" TargetType="StackPanel">
                                <Setter Property="Opacity" Value=".9" />
                                <Setter Property="HorizontalAlignment" Value="Center" />
                                <Setter Property="VerticalAlignment" Value="Center" />
                                <Setter Property="Margin" Value="15" />
                            </Style>

                            <!-- label -->
                            <Style x:Key="NumberLabelStyle" TargetType="TextBlock">
                                <Setter Property="HorizontalAlignment" Value="Center" />
                                <Setter Property="Foreground" Value="Yellow" />
                                <Setter Property="FontSize" Value="22" />
                                <Setter Property="FontFamily" Value="Segoe UI" />
                                <Setter Property="FontWeight" Value="Heavy" />
                            </Style>

                        </DataTemplate.Resources>
                        <Border Style="{StaticResource WidgetBorderStyle}" >
                            <Grid>

                                <Image Width="64" Height="96" Margin="1"  HorizontalAlignment="Center" 
                               Source="{Binding Path=Image,
                                    Converter={StaticResource PageDataToImageSourceConverter},
                                    Mode=OneWay}" />
                                <!-- zoom -->
                                <StackPanel Style="{StaticResource NumberAreaStyle}" >

                                    <TextBlock Style="{StaticResource NumberLabelStyle}" Text="{Binding Path=Number}" />

                                </StackPanel>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="{DynamicResource MainBackgroundBrush}" >
        <Grid.ColumnDefinitions>
            <ColumnDefinition></ColumnDefinition>
            <ColumnDefinition Width="3"></ColumnDefinition>
            <ColumnDefinition Width="400"/>
        </Grid.ColumnDefinitions>

        <Controls:ZoomPanner  Grid.Column="0">
            <Border CornerRadius="5" Margin="100" >
                <Image Name="MainImage" Margin="5" HorizontalAlignment="Center" Source="{Binding ElementName=ArchiveList, 
                    Converter={StaticResource PageDataToImageSourceConverter},
                    Path=SelectedItem, 
                    Mode=OneWay}" >
                </Image>
            </Border>
        </Controls:ZoomPanner>

        <GridSplitter Grid.Column="1" Grid.Row="0"
                Height="Auto" Width="Auto" HorizontalAlignment="Stretch"
                VerticalAlignment="Stretch"  Background="{DynamicResource MainBackgroundBrush}"/>

        <ListBox x:Name="ArchiveList" Grid.Column="2" MinWidth="100" AlternationCount="2"  Background="{DynamicResource MainBackgroundBrush}"/>

    </Grid>
</Page>
